<template>
	<view class="container">
		<u-navbar placeholder auto-back left-icon-color="#fff" @rightClick="edit(null)" bg-color="#033787">
			<view slot="center" class="navbar">{{$t('member.addr.manage')}}</view>
			<view slot="right" class="navbar-right">
				{{$t('member.addr.add')}}
			</view>
		</u-navbar>
		<u-loading-page v-if="loading" :loading-text="$t('c.loading')"></u-loading-page>
		<template v-else>
			<view v-if="list.length" class="list">
				<view v-for="(item,index) in list" :key="index" class="item">
					<view class="left" @click="select(item)">
						<view class="name">
							{{item.name}} {{item.phone}}
							<u-tag v-if="item.default == 1" :text="$t('c.default')" color="#E35525" border-color="#E35525" bg-color="#fceee9" plain size="mini"
								style="padding-left: 8rpx;"></u-tag>
						</view>
						<view class="addr">{{item.addr}}</view>
					</view>
					<view class="right" @click="edit(item)">
						<u-icon name="share-square" color="#7C8493" size="32"></u-icon>
					</view>
				</view>
			</view>
			<u-empty v-else style="margin-top: 200rpx;" :text="$t('c.not-data')"></u-empty>
		</template>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				isSelect: false,
				list: [],
				loading: true
			}
		},
		onLoad(option) {
			if (option && typeof option.select != 'undefined') {
				this.isSelect = true
			}
			this.getList()
		},
		methods: {
			getList() {
				this.loading = true
				setTimeout(() => {
					let i = 0
					while (i++ < 10) {
						this.list.push({
							id: i,
							name: '姓名' + i,
							phone: '123131231',
							addr: '地址地址' + i,
							default: i == 1 ? 1 : 0
						})
					}
					this.loading = false
				}, 300)
			},
			edit(item) {
				let url = '/pages/member/addr/info'
				if (item) {
					url += '?id=' + item.id
				}
				uni.navigateTo({
					url: url
				})
			},
			select(item) {
				if (this.isSelect) {
					uni.setStorage({
						key: 'selectAddr',
						data: item
					})
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style lang="scss">
	.list {
		padding: 0 32rpx;

		.item {
			padding: 32rpx 0;
			border-bottom: 1rpx solid #E6EAEE;
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name {
					font-size: 30rpx;
					font-weight: 600;
					color: #033787;
					padding-bottom: 8rpx;
					display: flex;
				}

				.addr {
					font-size: 20rpx;
					color: #7C8493;
				}
			}
		}
	}
</style>